import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import Tooltip from 'rc-tooltip';
import Modal from '@/common/components/Modal';
import schoolMode from '../../store/modes/SchoolMode';
import './style.less';

const Index = (props) => {
  const [show, setShow] = useState(false);
  useEffect(() => {
    schoolMode.getBaseInfo(123);
  }, []);

  // TODO: 添加默认背景遮罩样式和 Dialog 样式
  const modalBackdrop = (props) => {
    return <div className='modal-backdrop' {...props}></div>;
  };

  return (
    <div>
      这是一个 Demo 页面
      <div>从 Node 获取的 Mock 数据 {JSON.stringify(props.schoolData)}</div>
      <div>
        <Link to={`${window.urlPrefix}/other`}>另一个页面</Link>
        <Link to={`${window.urlPrefix}/school`}>去 School</Link>
      </div>
      <button
        onClick={() => {
          props.history.push(`${window.urlPrefix}/other`);
        }}
      >
        按钮 去另一个页面
      </button>
      <button onClick={() => setShow(true)}>打开 Modal</button>
      <Modal show={show} onHide={() => setShow(false)} renderBackdrop={modalBackdrop} className='modal-dialog'>
        <div>这是一些内容</div>
      </Modal>
      <Tooltip placement='left' trigger={['click']} overlay={<div>tooltip with <button>button</button></div>}>
        <a href='#'>hover</a>
      </Tooltip>

      <Tooltip placement='left' trigger={['click']} overlay={'abc'}>
        <a href='#'>hover</a>
      </Tooltip>
    </div>
  );
};

const mapStateToProps = (state, dispatch) => {
  return {
    ...state.school,
    dispatch,
  };
};

export default connect(mapStateToProps)(Index);
